<template>
  <div id="reversing-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
          <span class="search-label">冲正订单号:</span>
          <Input v-model="searchObj.coderId" placeholder="请输入">
          </Input>
          </Col>
          <Col class="search-item">
          <span class="search-label">门店名称:</span>
          <Input v-model="searchObj.shopName" placeholder="请输入">
          </Input>
          </Col>
          <Col class="search-item">
          <span class="search-label">冲正状态:</span>
          <Select v-model="searchObj.orderStatus" @on-change="doSearch">
            <Option v-for="item in orderStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label">订单类型:</span>
          <Select v-model="searchObj.orderType" @on-change="doSearch">
            <Option v-for="item in orderType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label">冲正发起时间:</span>
          <DatePicker v-model="searchObj.launchTime" type="datetimerange">
          </DatePicker>
          </Col>
          <Col class="search-item">
          <span class="search-label">冲正完成时间:</span>
          <DatePicker v-model="searchObj.completeTime" type="datetimerange">
          </DatePicker>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" type="primary">重置</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table height="537" :loading="loading" ref="selection" :columns="columns" :data="orderList.orderListData" stripe class="table-list" @on-selection-change="onSelectionChange">
    </Table>
    <div class="page-box" style="margin-top: 20px">
      <Page :total="orderList.orderListTotal" :current.sync="searchObj.pageIndex" :page-size="searchObj.pageSize" @on-change="handlePage" @on-page-size-change="handlePageSize" show-sizer show-total />
    </div>
  </div>
</template>
<script>
export default {
  name: 'order_reversing_list',
  data () {
    return {
      loading: true,
      // 冲正状态
      orderStatus: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '冲正申请中'
        },
        {
          value: 1,
          label: '冲正成功'
        },
        {
          value: 2,
          label: '冲正失败'
        }
      ],
      // 订单类型
      orderType: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '普通正向订单'
        },
        {
          value: 1,
          label: '普通逆向订单'
        },
        {
          value: 2,
          label: '特殊正向订单'
        },
        {
          value: 3,
          label: '特殊逆向订单'
        }
      ],
      // 表格列名称
      columns: [
        {
          title: '冲正订单编号',
          key: 'orderNumber',
          minWidth: 150,
          fixed: 'left'
        },
        {
          title: '关联订单编号',
          key: 'ParentOrderNumber',
          minWidth: 150 },
        {
          title: '门店ID',
          key: 'orderStatus',
          minWidth: 120
        },
        {
          title: '冲正状态',
          key: 'shopId',
          minWidth: 120
        },
        {
          title: '订单类型',
          key: 'payType',
          minWidth: 120
        },
        {
          title: '冲正方式',
          key: 'amount',
          minWidth: 120
        },
        {
          title: '冲正金额(元)',
          key: 'amount',
          minWidth: 120
        },
        {
          title: '冲正支付方式',
          key: 'Creation',
          minWidth: 120
        },
        {
          title: '冲正发起时间',
          key: 'Creation',
          minWidth: 120
        },
        {
          title: '冲正完成时间',
          key: 'Creation',
          minWidth: 120
        },
        {
          title: '备注',
          key: 'Remarks',
          minWidth: 120
        }
      ],
      searchObj: {
        orderStatus: -1,
        orderType: -1,
        coderId: '',
        shopName: '',
        launchTime: '',
        completeTime: '',
        pageIndex: 1,
        pageSize: 10
      },
      orderList: {
        orderListData: [
          {
            orderNumber: '111',
            ParentOrderNumber: '112',
            orderStatus: 3,
            shopId: 'asdads',
            customerName: '22',
            logisticsStatus: 1,
            payType: 2,
            amount: 11,
            Completion: '2018151515',
            Creation: '2015151515'
          }
        ],
        orderListTotal: 0
      }
    }
  },
  created () {
    this.loading = false
  },
  methods: {
    refund () {},
    handlePage (val) {
      this.searchObj.pageIndex = val
    },
    handlePageSize (val) {
      this.searchObj.pageSize = val
    },
    doSearch () {},
    onSelectionChange (selection) {}
  },
  computed: {}
}
</script>

<style lang='less'>
#reversing-list {
  .search-box {
    .search-item-left {
      width: 90%;
    }
    .search-item-right {
      width: 10%;
    }
    .search-item {
      margin-bottom: 20px;
      .ivu-date-picker {
        width: 280px;
        .ivu-date-picker-editor {
          width: 280px;
        }
      }
      .select-shop-item .ivu-select-input {
        width: 40px !important;
      }
    }
  }
}
</style>
